<template>
    <div class="main-container">
        <!-- 侧边栏目录 -->
        <aside class="sidebar">
            <h2>目录</h2>
            <div class="sidebar-content">
                <div v-for="(volume, volumeIndex) in fullVolumes" :key="volumeIndex" class="volume-sidebar">
                    <h3 @click="toggleVolume(volumeIndex)" class="volume-title-sidebar">
                        {{ volume.title }} <span
                            :class="['toggle-icon', { active: isVolumeOpen[volumeIndex] }]">▼</span>
                    </h3>
                    <ul v-if="isVolumeOpen[volumeIndex]" class="chapter-list-sidebar">
                        <li v-for="(chapter, chapterIndex) in volume.chapters" :key="chapterIndex"
                            class="chapter-item-sidebar">
                            <RouterLink :to="getChapterRoute(chapterIndex + 1)">
                                {{ chapter }}
                            </RouterLink>
                        </li>
                    </ul>
                </div>
            </div>
        </aside>

        <!-- 主内容区 -->
        <div class="book-container">
            <button class="back-button" @click="goBack">返回</button>

            <!-- 书籍封面展示 -->
            <div class="book-cover">
                <img src="@/assets/img/pingfan.jpg" alt="平凡的世界封面" class="cover-image">
            </div>

            <!-- 书籍基本信息 -->
            <div class="book-info">
                <h1 class="title">《平凡的世界》</h1>
                <div class="metadata">
                    <p class="author">路遥 著</p>
                    <p class="publisher">北京十月文艺出版社出版</p>
                    <p class="isbn">ISBN: 978-7-5366-9293-0</p>
                </div>
            </div>

            <!-- 书籍简介 -->
            <section class="synopsis">
                <h2>内容简介</h2>
                <p class="description">
                    《平凡的世界》是路遥创作的一部长篇小说，描绘了改革开放初期中国农村的社会变迁和普通人在时代洪流中的奋斗历程。作品以孙少平、孙少安两兄弟为主线，展现了他们在平凡世界中追求理想与尊严的不屈精神。
                </p>
            </section>

            <!-- 分卷展示 -->
            <div class="volumes">
                <div v-for="(volume, volumeIndex) in volumes" :key="volumeIndex" class="volume-card">
                    <h3 class="volume-title">{{ volume.title }}</h3>
                    <ul class="chapter-list">
                        <li v-for="(chapter, chapterIndex) in volume.chapters" :key="chapterIndex"
                            @click="selectChapter(volumeIndex, chapterIndex)" class="chapter-item">
                            {{ chapter }}
                        </li>
                    </ul>
                </div>
            </div>

            <!-- 操作按钮 -->
            <div class="action-buttons">
                <RouterLink to="/book01/santi-book01" target="_blank">
                    <button class="purchase-btn">开始阅读</button>
                </RouterLink>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 新增返回方法
const goBack = () => {
    router.push("/") // 返回首页
}

// 完整章节列表
const fullVolumes = [
    {
        title: '第一部',
        chapters: [
            '序幕', '青石砌成的学校', '村支书家的晚餐', '孙玉厚的烦恼', '金俊武的秘密',
            '孙少平的第一顿饭', '金波的友情', '田晓霞的到来', '一次特别的班会', '润叶的来访',
            '孙少平的课外生活', '金波的歌声', '田福军的新思路', '孙少安的决定', '砖窑点火',
            '砖厂的第一次成功', '生活的转折', '王满银的麻烦', '红梅的命运', '向前的心意',
            '润叶的决心', '李向南的视察', '孙玉厚的家庭会议', '孙少平的离别', '黄原城的初印象',
            '曹书记的考验', '小翠的选择', '包工头胡永州', '金俊武的建议', '孙少安的新计划',
            '砖厂的危机', '兰花的困境', '秀莲的坚持', '孙少平的工地生活', '金波的军营回忆',
            '田晓霞的大学生活', '孙少平的图书馆时光', '田晓霞的鼓励', '孙少安的贷款', '砖厂的重生',
            '润生的归来', '向前的婚礼', '晓霞的采访', '孙少平的矿工生涯', '师傅的离去',
            '惠英嫂的生活', '晓霞的承诺', '孙少安的承包计划', '金俊斌的意外', '金俊武的抉择',
            '田福堂的病', '金光亮的贡献', '俊山的提议', '双水村的春节', '尾声'
        ]
    },
    {
        title: '第二部',
        chapters: [
            '开篇·春天的消息', '孙少平的矿井工作', '师傅的影响', '惠英嫂的关心', '晓霞的新闻事业',
            '孙少安的承包计划实施', '金俊武的支持', '王彩娥的纠纷', '孙玉亭的活动', '金俊斌的葬礼',
            '田福军的仕途', '金英子的心事', '金强的爱情', '兰香的学业', '金波的情感',
            '孙少平的晋升', '师傅的遗愿', '晓霞的旅行', '孙少安的经济压力', '金俊武的担忧',
            '王满银的回归', '兰花的选择', '秀莲的身体状况', '金俊山的退休', '田福堂的反思',
            '孙少安的创业计划', '孙少平的挑战', '晓霞的理想', '金波的梦想', '兰香的成长',
            '金强的婚姻问题', '金英子的决定', '孙玉亭的失败', '金俊武的调解', '双水村的变化',
            '田福军的改革', '孙少安的工厂计划', '金俊武的合作', '王彩娥的结局', '孙玉厚的欣慰',
            '金波的告别', '晓霞的未来规划', '孙少平的思考', '尾声'
        ]
    },
    {
        title: '第三部',
        chapters: [
            '序章', '孙少安的工厂启动', '金俊武的投资', '秀莲的健康问题', '孙少平的矿上生活',
            '晓霞的记者生涯', '田福军的政治斗争', '金俊山的退位', '王满银的改变', '兰花的独立',
            '金强的婚姻危机', '金英子的离开', '金波的情感归宿', '兰香的毕业', '孙少平的晋升',
            '师傅的纪念', '惠英嫂的新生活', '孙少安的企业发展', '金俊武的协助', '田福军的胜利',
            '孙玉厚的晚年', '金波的音乐梦想', '晓霞的写作计划', '孙少平的文学修养', '金强的转变',
            '金俊山的反思', '王满银的稳定', '兰花的坚强', '秀莲的病情恶化', '孙少安的压力',
            '晓霞的采访任务', '孙少平的思考', '金波的旅行', '兰香的工作选择', '孙少安的最终成就',
            '孙少平的未来规划', '晓霞的决定', '尾声'
        ]
    }
]

// 分卷展示，每个卷只显示三个章节
const volumes = reactive([
    {
        title: '第一部',
        chapters: fullVolumes[0].chapters.slice(0, 3)
    },
    {
        title: '第二部',
        chapters: fullVolumes[1].chapters.slice(0, 3)
    },
    {
        title: '第三部',
        chapters: fullVolumes[2].chapters.slice(0, 3)
    }
])

const isVolumeOpen = ref([false, false, false])

const toggleVolume = (index) => {
    isVolumeOpen.value[index] = !isVolumeOpen.value[index]
}

// 章节选择逻辑
const selectChapter = (volumeIndex, chapterIndex) => {
    console.log(`选中第${volumeIndex + 1}卷 第${chapterIndex + 1}章`)
}

// 生成章节的路由地址
const getChapterRoute = (chapterNumber) => {
    return `/book01/santi-book${chapterNumber.toString().padStart(2, '0')}`
}
</script>

<style lang="scss" scoped>
/* 样式部分保持不变 */
.main-container {
    display: flex;
    padding: 0;
    height: 100vh;
}

/* 侧边栏样式 */
.sidebar {
    width: 280px;
    background: #f8f9fa;
    border-right: 1px solid #e9ecef;
    padding: 2rem 1.5rem;
    overflow-y: auto;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
    z-index: 100;
    position: fixed;
    height: 100%;
    top: 0;
    left: 0;

    h2 {
        color: #34495e;
        margin-bottom: 1.5rem;
        font-size: 1.3rem;
        border-bottom: 2px solid #ecf0f1;
        padding-bottom: 0.5rem;
    }

    .volume-sidebar {
        margin-bottom: 1.5rem;
    }

    .volume-title-sidebar {
        color: #16a085;
        margin-bottom: 0.5rem;
        cursor: pointer;
        font-size: 1.1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .toggle-icon {
            transition: transform 0.3s;
            font-size: 0.8rem;
        }

        .toggle-icon.active {
            transform: rotate(180deg);
        }
    }

    .chapter-list-sidebar {
        list-style: none;
        padding: 0;
        margin-left: 1rem;

        .chapter-item-sidebar {
            padding: 0.4rem 0;
            margin: 0.3rem 0;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 0.95rem;
            color: #666;

            a {
                text-decoration: none;
                color: inherit;
                transition: color 0.2s;
            }

            &:hover {
                color: #27ae60;
            }
        }
    }
}

/* 主内容区调整 */
.book-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 2rem 2rem 320px;
    font-family: 'Segoe UI', '思源宋体', sans-serif;
    color: #333;
    position: relative;
}

/* 已有的样式保持不变 */
.back-button {
    position: absolute;
    top: 20px;
    left: 100px;
    padding: 8px 16px;
    background: #f1f2f6;
    border: 1px solid #dcdde1;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    z-index: 10;

    &:hover {
        background: #dfe4ea;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
}

.book-cover {
    text-align: center;
    margin-bottom: 2rem;

    .cover-image {
        max-height: 400px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
    }
}

.book-info {
    text-align: center;
    margin-bottom: 3rem;

    .title {
        font-size: 2.5rem;
        color: #2c3e50;
        margin-bottom: 1rem;
    }

    .metadata {
        font-size: 1.1rem;
        color: #666;
        line-height: 1.6;
    }
}

.synopsis {
    margin-bottom: 3rem;

    h2 {
        color: #34495e;
        border-bottom: 2px solid #ecf0f1;
        padding-bottom: 0.5rem;
        margin-bottom: 1rem;
    }

    .description {
        line-height: 1.8;
        text-indent: 2em;
    }
}

.volumes {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    .volume-card {
        background: #f8f9fa;
        padding: 1.5rem;
        border-radius: 8px;
        transition: transform 0.3s ease;

        &:hover {
            transform: translateY(-5px);
        }

        .volume-title {
            color: #16a085;
            margin-bottom: 1rem;
        }

        .chapter-list {
            list-style: none;
            padding: 0;

            .chapter-item {
                padding: 0.5rem;
                margin: 0.3rem 0;
                cursor: pointer;
                transition: all 0.2s;
                border-radius: 4px;

                &:hover {
                    background: #e8f6f3;
                    color: #27ae60;
                }
            }
        }
    }
}

.action-buttons {
    text-align: center;
    margin-top: 3rem;

    .purchase-btn {
        background: #e74c3c;
        color: white;
        padding: 1rem 3rem;
        border: none;
        border-radius: 25px;
        font-size: 1.1rem;
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
            background: #c0392b;
        }
    }
}

/* 响应式调整 */
@media (max-width: 992px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .sidebar.active {
        transform: translateX(0);
    }

    .book-container {
        padding-left: 2rem;
    }

    .back-button {
        left: 5px;
    }
}
</style>